<template>
  <div class="singer">
    <div class="category">
      <ul>
        <li
          @click="getSingerList(item.value, i)"
          v-for="(item, i) in option"
          :key="item.value"
        >
          <span :class="i == index ? 'active' : ''">{{ item.text }}</span>
        </li>
      </ul>
    </div>
    <van-index-bar :sticky-offset-top="80" highlight-color="#9977f7" >
      <div v-for="(item, i) in wordList" :key="i">
        <van-index-anchor :index="item.type" style="background-color: #eee" />
        <van-cell :title="s.name" v-for="(s, index) in item.list" :key="index" @click="toSingerDetail(s,s.id)"/>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getSinger } from "../api/singer";
export default {
  data() {
    return {
      wordList: [
        { type: "A", list: [] },
        { type: "B", list: [] },
        { type: "C", list: [] },
        { type: "D", list: [] },
        { type: "E", list: [] },
        { type: "F", list: [] },
        { type: "G", list: [] },
        { type: "H", list: [] },
        { type: "I", list: [] },
        { type: "J", list: [] },
        { type: "K", list: [] },
        { type: "L", list: [] },
        { type: "M", list: [] },
        { type: "N", list: [] },
        { type: "O", list: [] },
        { type: "P", list: [] },
        { type: "Q", list: [] },
        { type: "R", list: [] },
        { type: "S", list: [] },
        { type: "T", list: [] },
        { type: "U", list: [] },
        { type: "V", list: [] },
        { type: "W", list: [] },
        { type: "X", list: [] },
        { type: "Y", list: [] },
        { type: "Z", list: [] },
      ],
      option: [
        { text: "全部", value: -1 },
        { text: "华语", value: 7 },
        { text: "欧美", value: 96 },
        { text: "日本", value: 8 },
        { text: "韩国", value: 16 },
        { text: "其他", value: 0 },
      ],
      index: 0,
    };
  },
  methods: {
	  //
    getSingerList(v, i) {
    //   console.log(v);
      this.index = i;
      for (let i = 0; i < this.wordList.length; i++) {
		 this.wordList[i].list=[]
        getSinger(v, this.wordList[i].type.toLowerCase()).then((res) => {
          this.wordList[i].list=res.artists
        });
      }
    },
	toSingerDetail(s,id){
		this.$router.push({path:"/singerDetail",query:{id:id}})
		
	}
  },
  created() {
	  this.getSingerList(-1,0)
  },
};
</script>

<style lang="scss" scoped>
.singer {
  margin-top: 80px;
  .category {
    ul {
      display: flex;
      li {
        flex-basis: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        box-sizing: border-box;
        span {
          font-size: 16px;
          padding-bottom: 5px;
          box-sizing: border-box;
        }
        .active {
          border-bottom: 2px solid red;
        }
      }
    }
  }
}
</style>
